@import './settings';

.terminal {
	background: black;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	color: var(--color-text);
	cursor: text;
	font-family: monospace, monospace;
	height: 100%;
	line-height: 1;
	overflow-y: auto;
	padding: 0.5em 1em;
	width: 100%;

	@media screen and (max-width: 600px) {
		font-size: 10px;
		word-break: break-word;
	}
}

.terminal-message {
	display: grid;
	grid-template-columns: auto auto 1fr;
	line-height: 1.1;
	margin: 0 0 0.1em;
	width: 100%;

	&.terminal-message--truncated {
		&:not(:hover) {
			.terminal-message__content {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}

.terminal-message__sign {
	color: var(--color-text-disabled);
	margin-right: 0.5em;
}

.terminal-message__sign--in {
	color: var(--color-theme);
}

.terminal-message__content {
	white-space: pre-wrap;
}

.terminal-message__time,
.terminal-message__process {
	color: var(--color-text-disabled);
}

.terminal-message__level {
	&.terminal-message__level--info {
		color: $color-level-info;
	}

	&.terminal-message__level--debug {
		color: $color-level-debug;
	}

	&.terminal-message__level--error {
		color: $color-level-error;
	}

	&.terminal-message__level--warn {
		color: $color-level-warning;
	}
}

.terminal__input-wrapper {
	display: grid;
	grid-template-areas: 'sign text';
	grid-template-columns: auto 1fr;
	position: relative;
	width: 100%;

	.terminal-message__sign {
		color: var(--color-text);
		line-height: 1.3em;
	}
}

.terminal__input {
	background: transparent;
	border: none;
	box-sizing: border-box;
	color: var(--color-text);
	font-family: inherit;
	font-size: 100%;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	width: 100%;

	&:focus {
		outline: none;
	}
}

.terminal__input--autocomplete {
	color: var(--color-text-disabled);
	line-height: 1.3em;
	padding-left: 1.2em;
	pointer-events: none;
	position: absolute;
}
